<template>
    <el-card class="box-card" style="height: 850px">
<!--        <el-card class="box-card" style="height: 80px">-->
            <el-row>
                <el-col :span="22">
                    <el-form :inline="true" :model="queryData" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="queryData.formsTitle" placeholder="问卷标题"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="initTableData">查询</el-button>
                            <el-button @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="tianjia">+ 添加问卷调查</el-button>
                </el-col>
            </el-row>

<!--        </el-card>-->
        <div class="interspaceH"></div>
        <el-row>
            <el-col :span="24">
                <el-card class="box-card">
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column prop="formsTitle" label="问卷标题">
                        </el-table-column>
                        <el-table-column prop="formsMessage" label="问卷内容" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column prop="formsNotes" label="备注">
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间">
                        </el-table-column>
                        <el-table-column prop="formsStatus" label="审核状态">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="shenhe(scope.$index, scope.row)">详情</el-button>
                                <el-button type="text" @click="update(scope.$index, scope.row)">编辑</el-button>
                                <el-button type="text" @click="shanchu(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                   @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                   :current-page="pagePagination.currentPage"
                                   :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                                   layout="total, sizes, prev, pager, next"
                                   :total="pagePagination.total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="问卷调查添加" :visible.sync="add" width="30%" :close-on-click-modal="false">
            <el-form ref="form" :model="createData" label-width="80px">
                <el-form-item label="问卷标题">
                    <el-input v-model="createData.formsTitle" placeholder="请输入问卷标题" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="问卷内容">
                    <el-input v-model="createData.formsMessage" placeholder="请输入问卷内容" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="createData.formsNotes" placeholder="请输入备注" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="close" size="small">取消</el-button>
                    <el-button @click="submit" size="small" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="问卷调查详情" :visible.sync="view" width="30%" :close-on-click-modal="false">
            <el-form ref="form" :model="viewData" label-width="80px" disabled>
                <el-form-item label="问卷标题">
                    <el-input v-model="viewData.formsTitle"></el-input>
                </el-form-item>
                <el-form-item label="问卷内容">
                    <el-input type="textarea" autosize v-model="viewData.formsMessage"></el-input>
<!--                    <el-input v-model="viewData.formsMessage"></el-input>-->
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="viewData.formsNotes"></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="viewData.createTime"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-input v-model="viewData.formsStatus"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="close" size="small">返回</el-button>
        </el-dialog>

        <el-dialog title="问卷调查编辑" :visible.sync="edit" width="30%" :close-on-click-modal="false">
            <el-form ref="form" :model="updateData" label-width="80px">
                <el-form-item label="问卷标题">
                    <el-input v-model="updateData.formsTitle" placeholder="请输入问卷标题" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="问卷内容">
                    <el-input v-model="updateData.formsMessage" placeholder="请输入问卷内容" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateData.formsNotes" placeholder="请输入备注" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-input v-model="updateData.formsStatus" placeholder="请输入审核状态" style="width: 220px" disabled></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="close" size="small">返回</el-button>
                    <el-button @click="baocun" size="small" type="primary">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            createValue: '',
            createVisible: false,
            updateValue: '',
            updateVisible: false,
            add: false,
            view: false,
            edit: false,
            fzadd: false,
            tableData: [],
            createData: {},
            viewData: {},
            updateData: {},
            queryData: {
                formsTitle: '',
            },
            // 分页参数
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            formsType: '1',
        }
    },
    mounted() {
        this.initTableData()
    },
    methods: {
        resetQuery() {
            this.queryData = {}
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        initTableData(){
            let that = this;
            let payload = {
                formsTitle: that.queryData.formsTitle,
                formsType: this.formsType,
                pageNum : this.pagePagination.currentPage,
                pageSize : this.pagePagination.pageSize
            }
            that.$request("/api/form/getByTitle/1_0", payload, "POST").then((data) => {
                this.pagePagination.total = data.total
                this.tableData = data.rows
            })
        },
        // 分页插件事件
        queryDataHandle(page = 1, row = 10) {
            let that = this;
            let payload = {
                formsType: this.formsType,
                pageNum: page,
                pageSize: row
            }
            that.$request("/api/form/getByTitle/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = row
            })
        },
        shenhe(index, row) {
            this.view = true
            this.viewData = row
        },
        close() {
            this.add = false;
            this.view = false;
            this.edit = false;
            this.fzadd = false
        },
        baocun() {
            this.$request('/api/form/update/1_0',this.updateData, 'POST').then((data) => {
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
                this.initTableData()
            })
            this.close()
        },
        tianjia() {
            this.createData = {}
            this.add = true
        },
        submit() {
            if (this.createData.formsTitle == null || this.createData.formsTitle == undefined || this.createData.formsTitle == ''){
                this.$message({
                    message: '请输入问卷标题',
                    type: 'error'
                })
                return
            }else if (this.createData.formsMessage == null || this.createData.formsMessage == undefined || this.createData.formsMessage == ''){
                this.$message({
                    message: '请输入问卷内容',
                    type: 'error'
                })
                return
            }
            this.createData.formsType = this.formsType
            this.$request('/api/form/add/1_0',this.createData, 'POST').then((data) => {
                this.$message({
                    message: '添加成功',
                    type: 'success'
                })
                this.initTableData()
            })
            this.close()
        },
        update(index, row) {
            this.edit = true;
            this.updateData = row
        },
        shanchu(index, row) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$request('/api/form/delete/1_0?formsId='+row.formsId, '', 'POST').then((data) => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.initTableData(row)
                })
            })
            .catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },


        handleClose(tag) {
            /*this.tableData.formsMessage.splice(this.tableData.formsMessage.indexOf(tag), 1);*/
        },
        showInput2() {
            this.updateVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput2.$refs.input.focus();
            });
        },
        handleInputConfirm1() {
            this.createData.formsMessage = this.createValue;
        },
        handleInputConfirm2() {
            this.updateData.formsMessage = this.createValue;
        },
    }
}
</script>

<style scoped>

</style>